<template lang="pug">
  el-tree(ref="treeInst" :data="value" :render-content="renderContent" v-if="value.length > 0" class="custom-tree" node-key="id")
  el-button(v-else @click="addFirst") 添加
</template>

<script>
import uuid from 'uuid'

export default {
  name: 'tree',
  props: {
    value: {
      default: () => []
    }
  },
  data() {
    return {
      operateId: undefined,
      idInputMap: {}
    }
  },
  created() {
    if (this.value.length === 0) {
      this.$emit('input', [])
    }
  },
  methods: {
    validate() {
      return Promise.resolve(this.value)
    },
    addFirst() {
      const newChild = {
        id: uuid(),
        label: '',
        children: []
      }
      this.value.push(newChild)
      this.focusNewItemInput(newChild)
    },
    prepend(node, data, store) {
      node.expand()

      const newChild = { id: uuid(), label: '', children: [] }

      if (!data.children) {
        this.$set(data, 'children', [])
      }
      if (data.children.length) {
        this.$refs.treeInst.insertBefore(newChild, data.children[0])
      } else {
        this.$refs.treeInst.append(newChild, node)
      }
      //
      // if (!data.children) {
      //   this.$set(data, 'children', [])
      // }
      // data.children.push(newChild)

      this.focusNewItemInput(newChild)
    },
    insertAfter(node, data) {
      const newItem = {
        id: uuid(),
        label: '',
        children: []
      }
      this.$refs.treeInst.insertAfter(newItem, data)
      this.focusNewItemInput(newItem)
    },
    focusNewItemInput(data) {
      this.operateId = data.id
      setTimeout(() => {
        let el = this.idInputMap[data.id].elm
        el && el.focus()
      })
    },
    remove(node, data) {
      this.$refs.treeInst.remove(data)
      // const parent = node.parent
      // const children = parent.data.children || parent.data
      // const index = children.findIndex(d => d.id === data.id)
      // children.splice(index, 1)
    },
    blur(e, node, data) {
      this.operateId = undefined
      if (!e.target.value) {
        this.remove(node, data)
        return
      }
      data.label = e.target.value
    },
    renderContent(h, { node, data, store }) {
      const input = <input style="width: 100px;" size="mini" value={ node.label }
                           onBlur={ ($event) => this.blur($event, node, data) }></input>
      this.idInputMap[data.id] = input
      return (
        <span class="custom-tree-node" onDblclick={ () => {
          this.operateId = data.id
          setTimeout(() => {
            this.idInputMap[data.id].elm.focus()
          })
        } }>
            { data.id !== this.operateId ? <span>{ node.label }</span> : input }
          <span>
              <button-svg class="mr-2" title="添加同级" icon-class="加号"
                          on-click={ (e) => {
                            e.stopPropagation()
                            this.insertAfter(node, data)
                          } }></button-svg>
              <button-svg class="mr-2" title="添加子级" icon-class="添加子级"
                          on-click={ (e) => {
                            e.stopPropagation()
                            this.prepend(node, data)
                          } }></button-svg>
              <button-svg class="mr-2" title="删除" icon-class="删除" on-click={ (e) => {
                e.stopPropagation()
                this.remove(node, data)
              } }></button-svg>
            </span>
          </span>)
    }
  }
}
</script>

<style lang="scss">
  .custom-tree {
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
    input {
      border: 0px !important;
      padding: 0px !important;
    }
  }


</style>
